﻿@model IndignadoFramework.FrontOffice.Models.ChatModel
@{
    Layout = "~/Views/Shared/_EmptyLayout.cshtml";
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
    #usersWindow
    {
        height: auto;
        width: 100%;
        font-family: Calibri;
    }
    
    #usersWindow h1
    {
        font-size: 18px;
        border-bottom: solid 1px #DEDEDE;
    }
    
    #chatWindow
    {
        height: 400px;
        width: 100%;
        overflow: hidden
    }
    
    #chatIFrame
    {
        height: 100%;
        width: 100%;
        border: 0px;
    }
</style>

<script type="text/javascript">
	var intervalId;
	$(document).ready(function () {
	    reloadConnected();
	    intervalId = window.setInterval(function () {
	        reloadConnected();
	    }, 10000);
	});

	function reloadConnected() {
	    $.post('/Chat/VentanaChatJson', {}, function (data) {
	        // Cargo los usuarios conectados
	        $('#connected').empty();
	        for (i = 0; i < data.model.UsuariosConectados.length; i++) {
	            $('#connected').append('<li><a class="ui-link" href="/Chat/SesionChat?UsuarioId=' + data.model.UsuariosConectados[i].Id + '" target="chatWindow">' + data.model.UsuariosConectados[i].UsuarioNombre + '</a></li>');
	        }
	        if (data.model.UsuariosConectados.length == 0) {
	            $('#connected').append('<p>No hay usuarios conectados</p>');
	        }

	        // Cargo las sesiones abiertas
	        $('#open-sessions').empty();
	        for (i = 0; i < data.model.SesionChatAbiertas.length; i++) {
	            $('#open-sessions').append('<li><a class="ui-link" href="/Chat/SesionChat?UsuarioId=' + data.model.SesionChatAbiertas[i].UsuarioSolicitanteId + '" target="chatWindow">' + data.model.SesionChatAbiertas[i].UsuarioSolicitanteNombre + '</a></li>');
	        }
	        if (data.model.SesionChatAbiertas.length == 0) {
	            $('#open-sessions').append('<p>No tiene sesiones abiertas</p>');
	        }

	        // Cargo las sesiones pendientes
	        $('#pending-sessions').empty();
	        for (i = 0; i < data.model.SesionChatPendientes.length; i++) {
	            $('#pending-sessions').append('<li><a class="ui-link" href="/Chat/SesionChat?UsuarioId=' + data.model.SesionChatPendientes[i].UsuarioSolicitanteId + '" target="chatWindow">' + data.model.SesionChatPendientes[i].UsuarioSolicitanteNombre + '</a></li>');
	        }
	        if (data.model.SesionChatPendientes.length == 0) {
	            $('#pending-sessions').append('<p>No tiene sesiones pendientes</p>');
	        }
	    });
	}
</script>

<div id="usersWindow">
    <h1>Usuarios Conectados</h1>
    <ul id="connected"></ul>

    <h1>Conversaciones Abiertas</h1>
    <ul id="open-sessions"></ul>

    <h1>Conversaciones Pendientes</h1>
    <ul id="pending-sessions"></ul>
    
    <a href="@Url.Action("Index", "Home")">Volver</a>
</div>
<div id="chatWindow">
    <iframe id="chatIFrame" name="chatWindow">
    </iframe>
</div>

<script type="text/javascript">
    window.onload = function () {
        $.ajax('/Chat/IniciarSesion');
        alert("Bienvenido al Chat");
    }

    window.onbeforeunload = function () {
        $.ajax('/Chat/CerrarSesion');
        alert("Se cerrará la sesión de Chat");
    }
</script>